<template>
	<view class="page">
		<view class="da-center flex-column py-4 bg-white rounded shadow" v-if="workList.length===0">
				<view class="font-md text-dark">您暂未参加任何活动！！！</view>
				<view class="mt-4 border border-warning rounded-6 px-3" @tap="goproperty" hover-class="bg-light-secondary">有维修去提交</view>
		</view>
		
		<view class="d-flex j-sb" v-else>
			<view class="da-center" @tap="showSelect('sortShow')">
				<text class="mr">{{ sortVal ? sortVal.label : '默认排序' }}</text>
				<u-icon name="arrow-down-fill" color="#8A8A8A" size="14"></u-icon>
			</view>
			<view class="da-center" @tap="showSelect('pickShow')">
				<text class="mr">{{ pickVal ? pickVal.label : '全部' }}</text>
				<u-icon name="arrow-down-fill" color="#8A8A8A" size="14"></u-icon>
			</view>
		</view>
		<view class="pb-2">
			<block v-for="(item,i) in workList" :key="i">
				<workListItem :itemdata="item" :index="i"/>
			</block>
			
		</view>
		<u-select v-model="sortShow" :list="sort" @confirm="sortConfirm"></u-select>
		<u-select v-model="pickShow" :list="pickList" @confirm="pickConfirm"></u-select>
	</view>
</template>

<script>
import workListItem from '@/components/myWork/work_list_item.vue';

import { workFindAll } from '@/api/work/work.js';

export default {
	components: {
		workListItem
	},
	data() {
		return {
			sortShow: false,
			pickShow: false,
			sort: [{ label: '默认排序', value: 0 }, { label: '按申请时间排序', value: 1 }, { label: '按审核时间排序', value: 2 }],
			pickList: [{ label: '全部', value: 0 }, { label: '待处理', value: 1 }, { label: '已处理', value: 2 }],
			sortVal: null,
			pickVal: null,
			workList:[]
		};
	},
	onReady() {
		this.getWorkFindList()
	},
	methods: {
	 async	getWorkFindList(){
		 const res =	await workFindAll()
		 if(res.flag){
			 this.workList = this.workList.concat(res.result)
		 }
		},
		showSelect(key) {
			this[key] = true;
		},
		sortConfirm(e) {
			this.sortVal = e[0];
		},
		pickConfirm(e) {
			this.pickVal = e[0];
		},
		goproperty(){
			uni.switchTab({
				url:'/pages/property/property'
			})
		}
	}
};
</script>

<style scoped lang="scss">
.page {
	width: 100%;
	height: 100%;
	background-color: #f4f3f8;
	padding: 20rpx;
}
</style>
